<template>
  <!-- 开始菜单 -->
  <div v-show="opened" class="start-menu">
    <!-- 侧边栏 -->
    <Sidebar class="sidebar"/>
    <!-- 菜单内容 -->
    <div class="menu-content">
      <p>📜 菜单内容 1</p>
      <p>📜 菜单内容 2</p>
      <p>📜 菜单内容 3</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import Sidebar from "./Sidebar/Index.vue";

const opened = defineModel("open", {
  default: false,
});

const StartMenu = (() => {
  const s = reactive({
    close() {
      opened.value = false;
    },
  });

  const handleClickOutside = (event: any) => {
    if (!event.target.closest(".taskbar") && !event.target.closest(".start-menu") && !event.target.closest(".task-icons")) {
      s.close();
    }
  };

  onMounted(() => {
    document.addEventListener("mousedown", handleClickOutside);
  });

  onUnmounted(() => {
    document.removeEventListener("mousedown", handleClickOutside);
  });

  return s;
})();
</script>

<style scoped lang="scss">
$sidebar_color: rgba(51, 51, 51, 0.85); // 修改为半透明颜色

.start-menu {
  position: fixed;
  bottom: 48px;
  width: 300px;
  height: 400px;
  background-color: $sidebar_color;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  color: white;
  display: flex;
}

.menu-content {
  background-color: $sidebar_color;
  user-select: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  height: 100%;
  width: 260px;
  position: fixed;
  left: 40px;
  flex: 1;
}
</style>
